<template>
	<view class="">
		<view class="form-body">
			<u-form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth="auto"
				errorType="toast">
				<u-form-item label="项目主图" borderBottom>
					<view class="flex justify-end">
						<view class="">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
								:maxCount="1"></u-upload>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="项目名称" prop="name" borderBottom>
					<u-input v-model="formData.name" border="none" placeholder="建议输入12字以内" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="项目分类" prop="categoryName" borderBottom @click="category.show=true">
					<u-input v-model="formData.categoryName" border="none" placeholder="请选择项目分类" inputAlign="right"
						:readonly="true">
					</u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="项目属性" prop="attributeName" borderBottom @click="attribute.show=true">
					<u-input v-model="formData.attributeName" border="none" placeholder="请选择项目属性" inputAlign="right"
						:readonly="true"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="项目原价" prop="originalPrice" borderBottom>
					<u-input v-model="formData.originalPrice" border="none" inputAlign="right" type="number">
						<u-text text="￥" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item label="项目单价" prop="price" borderBottom>
					<u-input v-model="formData.price" border="none" inputAlign="right" type="number">
						<u-text text="￥" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item label="跨店结算价" prop="costPrice" borderBottom>
					<u-input v-model="formData.costPrice" border="none" inputAlign="right" type="number">
						<u-text text="￥" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item label="项目时长" prop="serviceTimeName" borderBottom @click="serviceTime.show = true">
					<u-input v-model="formData.serviceTimeName" border="none" placeholder="请选择项目时长" inputAlign="right"
						:readonly="true"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="是否上架" prop="onLine" borderBottom>
					<div class="flex justify-end">
						<u-switch v-model="formData.onLine"></u-switch>
					</div>
					
				</u-form-item>
				<u-form-item label="手工提成" borderBottom>
					<view class="mr-20">
						<u-input v-model="formData.manualPercentage" type="number" border="none" placeholder="请输入数字"
							inputAlign="right"></u-input>
					</view>
					<u-radio-group slot="right" v-model="formData.manualPercentageType" placement="row">
						<u-radio activeColor="#e54d42" :name="0" label="元"></u-radio>
						<u-radio activeColor="#e54d42" :name="1" label="%"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="销售提成" prop="salePercentage" borderBottom>
					<view class="mr-20">
						<u-input v-model="formData.salePercentage" type="number" border="none" placeholder="请输入数字"
						inputAlign="right"></u-input>
					</view>
					<u-radio-group slot="right" v-model="formData.salePercentageType" placement="row">
						<u-radio activeColor="#e54d42" :name="0" label="元"></u-radio>
						<u-radio activeColor="#e54d42" :name="1" label="%"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="项目流程" prop="value" labelPosition="top">
					<view class="mt-20">
						<u-textarea v-model="formData.value" placeholder="请输入该步骤说明( 换行用 / 间隔 )"></u-textarea>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-button">
			<u-button type="primary" size="large" color="#e54d42" text="确定" @click="onSubmit"></u-button>
		</view>
		<u-picker :show="category.show" :columns="category.columns" keyName="name" @cancel="category.show=false"
			title="选择项目分类" @confirm="categoryConfirm"></u-picker>
		<u-picker :show="attribute.show" :columns="attribute.columns" keyName="name" @cancel="attribute.show=false"
			title="选择项目属性" @confirm="attributeConfirm"></u-picker>
			<u-picker :show="serviceTime.show" :columns="serviceTime.columns" keyName="label" @cancel="serviceTime.show=false"
				title="选择项目属性" @confirm="serviceTimeConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				fileList: [],
				formData: {
					attributeId:0,
					carouselImages: "",
					detailsImages: "",
					integralAcquire: 0,
					integralDeduct: 0,
					manualPercentage: 0,
					manualPercentageType: 0,
					name: "",
					onLine: false,
					originalPrice: 0,
					price: 0,
					costPrice: 0,
					salePercentage: 0,
					salePercentageType: 0,
					selectEmployee: 1,
					selectTime: 1,
					serviceTimes: 0,
					sortProportion: 0,
					subscribeCount: 0,
				},
				rules: {
					name: [{
						required: true,
						message: '请输入项目名称',
						trigger: ['change', 'blur']
					}]
				},
				category: {
					show: false,
					columns: []
				},
				attribute: {
					show: false,
					columns: []
				},
				serviceTime:{
					show: false,
					columns: [[
						{ value: 10, label: "10分钟" },
						{ value: 15, label: "15分钟" },
						{ value: 20, label: "20分钟" },
						{ value: 30, label: "30分钟" },
						{ value: 40, label: "40分钟" },
						{ value: 50, label: "50分钟" },
						{ value: 60, label: "60分钟" },
						{ value: 70, label: "70分钟" },
						{ value: 80, label: "80分钟" },
						{ value: 90, label: "90分钟" },
						{ value: 100, label: "100分钟" },
						{ value: 110, label: "110分钟" },
						{ value: 120, label: "120分钟" },
						{ value: 150, label: "150分钟" },
					]]
				}
			}
		},
		onLoad(option) {
			this.getCreate()
			let that = this
			if (option.id) {
				uni.setNavigationBarTitle({
					title: "编辑项目",
				})
				this.isEdit = true
				this.getEdit(option.id)
			} else {
				uni.setNavigationBarTitle({
					title: "新增项目"
				})
				this.isEdit = false
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getEdit(id){
				let that = this
				this.$reqPostParms('CoreCmsProjectGetEdit',{id:id}).then(res=>{
					this.formData = res.data
					this.fileList.push({url:res.data.image})
					this.formData.serviceTimeName = that.formData.serviceTimes?
						that.serviceTime.columns[0].find(im=>{return im.value===that.formData.serviceTimes}).label:''
					this.formData.categoryName = that.formData.categoryId?that.category.columns[0].find(im=>{return im.id===that.formData.categoryId}).name:''
					this.formData.attributeName = that.formData.attributeId?that.attribute.columns[0].find(im=>{return im.id===that.formData.attributeId}).name:''
				})
			},
			categoryConfirm(arr){
				this.formData.categoryId = arr.value[0].id
				this.formData.categoryName = arr.value[0].name
				this.category.show = false
			},
			attributeConfirm(arr){
				this.formData.attributeId = arr.value[0].id
				this.formData.attributeName = arr.value[0].name
				this.attribute.show = false
			},
			serviceTimeConfirm(arr){
				this.formData.serviceTimes = arr.value[0].value
				this.formData.serviceTimeName = arr.value[0].label
				this.serviceTime.show = false
			},
			getCreate() {
				this.$reqPost('CoreCmsProjectGetCreate').then(res => {
					this.category.columns = [res.data.categories]
					this.attribute.columns = [res.data.attributes]
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.formData.image = ''
			},
			onSubmit() {
				this.$refs.form.validate().then(res => {
					if(this.isEdit){
						this.$reqJsonPost('CoreCmsProjectDoEdit',{
							project:this.formData,
							goods:[],
							value:[]
						}).then(res=>{
							uni.$emit('upprolist')
							uni.navigateBack();
						})
					}else {
						this.$reqJsonPost('CoreCmsProjectDoCreate',{
							project:this.formData,
							goods:[],
							value:[]
						}).then(res=>{
							uni.$emit('upprolist')
							uni.navigateBack();
						})
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.formData.image = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-body {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 180rpx;
	}
</style>
